<template>
  <div class="page-common-layout custom-tablePage-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-select
            class="project-select"
            showSearch
            allowClear
            placeholder="请选择项目"
            :loading="projectLoading"
            :filter-option="filterOption"
            v-model="condition.proCode"
            @change="search()"
          >
            <a-select-option
              :value="item.proCode"
              v-for="item in projectSoucre"
              :key="item.uuid"
            >
              {{ item.proName }}
            </a-select-option>
          </a-select>
          <a-select
            showSearch
            allowClear
            placeholder="请选择项目类型"
            :loading="dicCodeLoading"
            :filter-option="filterOption"
            v-model="condition.engType"
            @change="search()"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in engineerTypeSourec"
              :key="item.dicItemCode"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
          <a-select
            showSearch
            allowClear
            placeholder="请选择立项类型"
            :loading="dicCodeLoading"
            :filter-option="filterOption"
            v-model="condition.type"
            @change="search()"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in approvalTypeSourec"
              :key="item.dicItemCode"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <div class="table-operate">
        <!-- <a-button
          @click="handleAddModal({}, 1)"
          class="cu-btn-primary margin-bottom-xs"
          icon="plus"
        >
          新增
        </a-button> -->
      </div>
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            field="tenantName"
            title="项目名称"
            width="200"
            align="left"
          >
          </vxe-column>
          <vxe-column field="engTypeDesc" title="项目类型"> </vxe-column>
          <vxe-column field="typeDesc" title="立项类型"> </vxe-column>
          <vxe-column field="creator" title="创建人"> </vxe-column>
          <vxe-column field="createTime" title="创建时间"> </vxe-column>
          <vxe-column field="remark" title="备注"> </vxe-column>
          <vxe-column field="operate" width="80" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <!-- 详情 -->
                <a-tooltip placement="top">
                  <template slot="title">
                    查看
                  </template>
                  <a-icon type="file-search" @click="handleAddModal(row, 3)" />
                </a-tooltip>
                <!-- 编辑 -->
                <a-tooltip>
                  <template slot="title">
                    编辑
                  </template>
                  <a-icon type="edit" @click="handleAddModal(row, 2)" />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 处理 -->
    <addModal
      :visible.sync="addModal.visible"
      :parameter="addModal.soucre"
      :operateType="addModal.operateType"
    ></addModal>
  </div>
</template>

<script>
// 土地手续办理
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import addModal from "./components/addModal.vue";
import { getDicItemByCode, getAllProListByQX } from "@/api/common.js";
import { getCantonListPage } from "@/api/cantonManage";
export default {
  components: {
    ScreenConditions,
    addModal,
  },
  data() {
    return {
      //项目
      projectLoading: false,
      projectSoucre: [],
      dicCodeLoading: false,
      //项目类型
      engineerTypeSourec: [],
      //立项类型
      approvalTypeSourec: [],
      //查询条件
      condition: {
        //项目
        proCode: undefined,
        //项目类型
        engType: undefined,
        //立项类型
        type: undefined,
      },
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      //新增
      addModal: {
        visible: false,
        soucre: {},
        operateType: 1,
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //查询数据
    async getData() {
      //项目
      await this.getProjectData();
      //项目类型
      this.engineerTypeSourec = await this.getDicCodeData("engineeringType");
      //立项类型
      this.approvalTypeSourec = await this.getDicCodeData(
        "projectApprovalType"
      );
      this.getTableData();
    },

    handleAddModal(row, type) {
      this.addModal.operateType = type;
      this.addModal.soucre = row;
      this.addModal.visible = true;
    },

    //查询项目
    getProjectData() {
      this.projectLoading = true;
      return new Promise((resolve, reject) => {
        getAllProListByQX()
          .then((res) => {
            this.projectSoucre = res?.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectSoucre = [];
            reject();
          })
          .finally((_) => {
            this.projectLoading = false;
          });
      });
    },

    //查询字典表
    getDicCodeData(dicCode = "") {
      this.dicCodeLoading = true;
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: dicCode })
          .then((res) => {
            let { data } = res;
            resolve(data);
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.dicCodeLoading = false;
          });
      });
    },

    //查询
    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    //重置
    reset() {
      this.condition.proCode = undefined;
      this.condition.engType = undefined;
      this.condition.type = undefined;
      this.search();
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { proCode = "", engType = "", type = "" } = this.condition;
      return new Promise((resolve, reject) => {
        getCantonListPage({
          page,
          pageSize,
          proCode,
          code: "TDSXBL",
          status: "1",
          engType,
          type,
        })
          .then((res) => {
            this.tableData = res?.rows || [];
            this.pager.total = res?.totalCount || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.state {
  &::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    background: #239b53;
    border-radius: 0px 0px 0px 0px;
    border-radius: 50%;
    margin-right: 10px;
  }
  &.default {
    &::before {
      background: #8c8c8c;
    }
  }
  &.ing {
    &::before {
      background: #f07f17;
    }
  }
  &.lock {
    &::before {
      background: #239b53;
    }
  }

  &.error {
    &::before {
      background: #ff3f4a;
    }
  }
}
</style>
